<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:c="http://java.sun.com/jstl/core">

<ui:composition>
	
	#{tenantController.setOperationType(operationType)}

	<h:panelGroup id="panelTenant">
	
		<h:panelGroup layout="block" id="operationFeedback" rendered="#{tenantController.saved}">
			<p/>
			#{i18N.getTrans('YourDataWasSaved')}
			<h:link outcome="/realestate/calendar">#{i18N.getTrans('BookTheApartment')}</h:link>
		</h:panelGroup>	
		
	
		<h:panelGroup id="panelTenantToRegister" rendered="#{tenantController.saved == false}">
	
			<h:form>
				<h:inputHidden id="operationType" value="#{tenantController.operationType}" />
				
				<p class="betweenSections" />
		
				<h:panelGroup id="userData" rendered="true">
				
					<span> 
						<label for="email">#{i18N.getTrans('Label:Email')}</label> <h:inputText
							id="email" value="#{tenantController.email}"
							pt:placeholder="su esmalte vidriado" pt:autofocus="true"
							required="true"
							requiredMessage="#{i18N.getTrans('Label:PleaseProvideYourEmail')}"
							valueChangeListener="#{tenantController.emailChangeListener}" style="width: 400px;">
							<f:ajax event="keyup" execute="@this" render="" />
						</h:inputText>
						<h:message for="email" />
					</span>
					
					<h:panelGroup id="panelPassword" rendered="#{operationType == 'CREATE' or operationType == 'UPDATE'}" layout="block">
					
						<span> <label for="password">#{i18N.getTrans('Label:Password')}</label> <h:inputText
								id="password" value="#{tenantController.password}"
								required="true"
								requiredMessage="#{i18N.getTrans('PleaseProvideAPassword')}" style="width: 90px;"
							/>
							<h:message for="password" />
						</span>
						<span> <label for="passwordConfirmation">#{i18N.getTrans('Label:PasswordConfirmation')}</label> <h:inputText
								id="passwordConfirmation" value="#{tenantController.passwordConfirmation}"
								required="true"
								requiredMessage="#{i18N.getTrans('PleaseConfirmYourPassword')}" style="width: 90px;"
							/>
							<h:message for="passwordConfirmation" />
						</span>
					</h:panelGroup>
	
					<p class="betweenSections" />
	
					<label for="sex">#{i18N.getTrans('Label:Email')}</label>
					<h:selectOneMenu id="sex" value="#{tenantController.sex}">
						<f:selectItem itemValue="f" itemLabel="Señora" />
						<f:selectItem itemValue="m" itemLabel="Señor" />
					</h:selectOneMenu>
					<h:message for="sex" />
	
					<span> <label for="firstname">#{i18N.getTrans('Label:Firstname')}</label> <h:inputText
							id="firstname" value="#{tenantController.givenname}"
							pt:placeholder="su nombre" required="true"
							requiredMessage="Bitte gib deinen Vornamen ein."
						>#{tenantController.givenname}</h:inputText>
						<h:message for="firstname" />
						</span>
						<span>
					 <label for="familyname">#{i18N.getTrans('Label:FamilyName')}</label> <h:inputText
							id="familyname" value="#{tenantController.surename}"
							pt:placeholder="su apellido honorable" required="true"
							requiredMessage="Bitte auch deinen Nachnamen angeben."
						>#{tenantController.surename}</h:inputText>
						<h:message for="familyname" />
					</span>
					<label for="street">#{i18N.getTrans('Label:StreetAndNumber')}</label>
					<h:inputText id="street" value="#{tenantController.streetAndNumber}"
						pt:placeholder="su calle y número" required="true"
						requiredMessage="Deine Anschrift ist für uns wichtig. Bitte Strasse und Hausnummer angeben."
					/>
					<h:message for="street" />
					<label for="additionalAddressInfo">#{i18N.getTrans('Label:AddressAppendix')}</label>
					<h:inputText id="additionalAddressInfo"
						value="#{tenantController.appartment}"
						pt:placeholder="su número de planta y piso"
					/>
					<h:message for="additionalAddressInfo" />
	
					<span> <label for="postalCode">#{i18N.getTrans('Label:PostalCode')}</label> <h:inputText
							id="postalCode" value="#{tenantController.postalCode}"
							pt:placeholder="código postal" maxlength="15" style="width: 90px;"
							required="true"
							requiredMessage="Deine Anschrift ist für uns wichtig. Bitte Postleitzahl angeben."
						/>
						<h:message for="postalCode" />
					</span>

					<span> <label for="city">#{i18N.getTrans('Label:City')}</label> <h:inputText
							id="city" value="#{tenantController.city}"
							pt:placeholder="su bonito pueblucho" required="true"
							requiredMessage="Deine Anschrift ist für uns wichtig. Bitte Ortschaft angeben."
						/>
						<h:message for="city" />
					</span>
					<label for="countryCode">#{i18N.getTrans('Label:Country')}</label>
					<h:selectOneMenu id="countryCode"
						value="#{tenantController.countryCode}" required="true"
						requiredMessage="Bitte wähle das Land deiner Anschrift aus."
						pt:placeholder="su bonito pueblucho"
					>
						<f:selectItem itemLabel="Elegir su país lindo" />
						<f:selectItems value="#{tenantController.countryOptions}" />
					</h:selectOneMenu>
					<h:message for="countryCode" />
					
					<span> <label for="mobile">#{i18N.getTrans('Label:Mobile')}</label> <h:inputText
							id="mobile" value="#{tenantController.mobile}"
							pt:placeholder="e.g. +41 79 123 45 68"
							required="true"
							requiredMessage="#{i18N.getTrans('PleaseProvideYourMobileInTheCorrectFormat')}."
						/>
						<h:message for="mobile" />
					</span>
	
				</h:panelGroup>
					
				<p class="betweenSections" />
				
				<h:commandButton action="#{tenantController.saveTenant()}" value="#{i18N.getTrans('Tenant:SaveYourData')}">
					<f:ajax execute="@form" render="panelTenant"/>
				</h:commandButton>
				
			</h:form>
		
		</h:panelGroup>
	</h:panelGroup>

</ui:composition>
</html>
